<template>
    <span>分类：</span>
    <el-select v-model="keyWords.category" clearable placeholder="选择分类">
        <el-option v-for="item in category" :key="item" :label="item" :value="item" />
    </el-select>
    <span>搜索关键词：</span>
    <el-input v-model="keyWords.search" class="w-50 m-2" placeholder="输入关键字" :prefix-icon="Search" />
    <el-button type="primary" @click="searchGoodsData">搜索</el-button>
    <el-table :data="goodsCategory" style="width: 100%">
        <el-table-column prop="proid" label="商品编号" width="250" />
        <el-table-column prop="proname" label="商品名称" width="250" />
        <el-table-column prop="brand" label="品牌" width="100" />
        <el-table-column label="图片" width="200">
            <template #default="scope">
                <img class="img" :src="scope.row.img1">
            </template>
        </el-table-column>
        <el-table-column prop="originprice" label="商品价格" width="80" />
        <el-table-column prop="discount" label="商品折扣" width="80" />
        <el-table-column label="是否上架" width="80">
            <template #default="scope">
                <span>{{ scope.row.issale === 1 ? "已上架" : "未上架" }}</span>
            </template>
        </el-table-column>
        <el-table-column label="是否秒杀" width="100">
            <template #default="scope">
                <el-switch v-model="scope.row.isseckill" :active-value="1" :inactive-value="0"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff69B4"
                    @change="(val: number) => changeSeckillFlag(scope.row.proid, val)" />
            </template>
        </el-table-column>
        <el-table-column label="是否推荐" width="100">
            <template #default="scope">
                <el-switch v-model="scope.row.isrecommend" :active-value="1" :inactive-value="0"
                    style="--el-switch-on-color: #13ce66; --el-switch-off-color: #ff69B4"
                    @change="(val: number) => changeRecommendFlag(scope.row.proid, val)" />
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup lang="ts">
import type { AxiosResponse } from 'axios';
import { reactive } from 'vue'
import service from '../../../utils/service';
import { Search } from '@element-plus/icons-vue'

import { ElMessage } from 'element-plus';

// 获取分类数据
const category = reactive<string[]>([])
const keyWords = reactive<{ search: string, category: string }>({ search: "", category: "" })
const getCategory = () => {
    service({
        url: `/pro/getCategory`,

    }).then((res: AxiosResponse) => {
        category.length = 0
        category.push(...res.data.data)
    })
}
getCategory()
// 表单绑定搜索关键词
type TCateGory = {
    banner: string[],
    proid: string,
    brand: string,
    proname: string,
    originprice: number,
    sales: number,
    stock: number,
    desc: string,
    issale: number,
    isrecommend: number,
    discount: number,
    isseckill: number,
    img1: string


}
const goodsCategory = reactive<TCateGory[]>([])
// 筛选商品
const searchGoodsData = () => {
    service({
        url: `/pro/searchPro`,
        method: "post",
        data: keyWords
    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {
            goodsCategory.length = 0
            goodsCategory.push(...res.data.data)
            if (goodsCategory.length === 0) {
                ElMessage({
                    showClose: true,
                    message: "没有相关匹配项，亲，请重新输入",
                    type: "error"
                })
            }
        }
    })

}
searchGoodsData()
// 修改商品是否秒杀
const changeSeckillFlag = (proid: string, val: number) => {
    service({
        url: `/pro/updateFlag`,
        method: "post",
        data: {
            proid,
            type: "isseckill",
            flag: val
        }

    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {
            ElMessage({
                showClose: true,
                message: "修改成功，亲！！！",
                type: "success"
            })
        }
    })
}
// 修改商品是否推荐
const changeRecommendFlag = (proid: string, val: number) => {
    service({
        url: `/pro/updateFlag`,
        method: "post",
        data: {
            proid,
            type: "isrecommend",
            flag: val
        }

    }).then((res: AxiosResponse) => {
        if (res.data.code === "200") {
            ElMessage({
                showClose: true,
                message: "修改成功，亲！！！",
                type: "success"
            })
        }
    })
}
</script>

<style scoped>
.img {
    width: 200px;
    height: 185px;
}

span {
    line-height: 40px;
    margin: 0 10px;
}

.el-input {
    max-width: 500px;
    margin: 0 10px;
}
</style>